<template>
  <div class="box">
    <section >
      <el-tabs v-model="activeName" >
        <el-tab-pane label="技术问答" name="first">
          <div class="post" v-for="(item,index) in articles">
            <h3 class="post-title"><a href="#" @click="jump(item)">{{ item.title }}</a></h3>
            <p class="post-text">{{ item.text }}</p>
            <p class="post-meta"><img class="author-avatar" :src="item.imageUrl">{{ item.name }}，发布于 {{
                item.createTime
              }}</p>
          </div>
          <br>
          <el-pagination
              :page-size="10"
              :pager-count="11"
              layout="prev, pager, next"
              @current-change="currentChange"
              :total="count">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="知识学习" name="second">
          <div class="post" v-for="(item,index) in teaArticles">
            <h3 class="post-title"><a href="#" @click="jump(item)">{{ item.title }}</a></h3>
            <p class="post-meta"><img class="author-avatar" :src="item.imageUrl">{{ item.name }}，发布于 {{
                item.createTime
              }}</p>
            <p class="post-text">{{ item.text }}</p>
          </div>
          <br>
          <el-pagination
              :page-size="10"
              :pager-count="11"
              layout="prev, pager, next"
              @current-change="currentChange2"
              :total="count">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </section>
    <div class="right">
      <div>
        <el-button type="primary" style="width: 200px" icon="el-icon-edit" @click="jumpEdit()">发布内容</el-button>
      </div>
      <div class="right-main">
        <i class="el-icon-s-data" style="margin-top: 10px" >热帖排行</i>
        <hr style="margin: 5px;background-color: #888888; height:1px; border:none">
        <div v-for="(item,index) in artOrderView" style="display: flex;flex-direction: column; align-items: flex-start;margin-left: 5px;margin-top: 10px">
          <p class="right-title" @click="jump(item)">{{item.title}}</p>
          <p style="margin-left: 10px;font-size: 5px;color: #a6a6a6">浏览数 : {{item.viewNum}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Square",
  data() {
    return {
      count: 0,
      currentPage: 1,
      currentPage2: 1,
      articles: [],
      teaArticles:[],
      activeName: 'first',
      artOrderView:[]
    }
  },
  methods: {
    jumpEdit(){
      this.$router.push("/editor")
    },
    jump(item) {
      let routeUrl = this.$router.resolve({
        path: "/showArticles",
        query: {
          id: item.id,
          userId: item.userId
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    currentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    currentChange2(val) {
      this.currentPage2 = val;
      this.getTeaList();
    },
    getCount() {
      this.$axios.get("articles/getCount")
          .then(resp => {
            let res = resp.data;
            this.count = res.data;
            console.log(this.count)
          })
          .catch(error => {
            console.log(error)
          })
    },
    getList() {
      this.$axios.get("articles/getList?currentPage=" + this.currentPage)
          .then(resp => {
            let res = resp.data;
            this.articles = res.data;
          })
          .catch(error => {
            console.log(error)
          })
    },
    getTeaList() {
      this.$axios.get("articles/getTeaList?currentPage=" + this.currentPage2)
          .then(resp => {
            let res = resp.data;
            this.teaArticles = res.data;
          })
          .catch(error => {
            console.log(error)
          })
    },
    getOrderView(){
      this.$axios.get("articles/getOrderView")
          .then(resp => {
            let res = resp.data
            this.artOrderView = res.data;
            if(this.artOrderView.length>5){
              this.artOrderView.splice(4,this.artOrderView.length-5);
            }
          })
          .catch(error => {
            console.log(error)
          })
    }
  },
  created() {
    this.getCount();
    this.getList();
    this.getTeaList();
    this.getOrderView();
  }
}
</script>

<style scoped>

.right-title{
  margin-left: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  cursor: pointer
}

.right-main{
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 15px;
}

.right{
  margin-top: 20px;
  margin-right: 20px;
  border-radius: 30px;
  width: 400px;
  height: 400px;
  background: #f1f5f8;
}
.box {
  width: 100%;
  border-radius: 30px;
  display: flex;
  justify-content: center;
}

.left img {
  height: 80px;
  width: 80px;
}


.bottom p {
  margin: 10px;
  font-size: 10px;
}

a {
  color: #333;
  text-decoration: none;
}

section {
  background-color: #fff;
  padding: 20px;
  margin: 20px;
  text-align: left;
  border-radius: 20px;
  width: 2500px;
}

h2 {
  margin-top: 0;
  margin-bottom: 10px;
}

.post {
  margin-bottom: 20px;
}

.post-title {
  font-size: 18px;
  margin-bottom: 7px;
}

a:hover {
  color: cornflowerblue;
}

.post-meta {
  font-size: 14px;
  color: #999;
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}

.post-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.author-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
</style>